<template>
	<div class="pay-container">
		<!-- 生成微信支付二维码 -->
		<div class="erwei">
			<img :src="payUrl" alt="">
		</div>
		<i class="iconfont icon-wechat_pay" style="color:green"></i>
		<span>使用微信进行支付</span>
		<el-descriptions title="订单详情">
			<el-descriptions-item label="订单号">{{orderDetail.order_id}}</el-descriptions-item>
			<el-descriptions-item label="创建时间">{{orderDetail.create_time}}</el-descriptions-item>
			<el-descriptions-item label="产品名称">{{orderDetail.orderDetail[0].productName}}</el-descriptions-item>
			<el-descriptions-item label="商品描述">{{orderDetail.orderDetail[0].description}}</el-descriptions-item>
			<el-descriptions-item label="购买数量">{{orderDetail.order_id}}</el-descriptions-item>
			<el-descriptions-item label="购买用户">{{orderDetail.user_nickname}}</el-descriptions-item>
			<el-descriptions-item label="手机号">{{orderDetail.user_phone}}</el-descriptions-item>
			<el-descriptions-item label="总价格">{{orderDetail.total_ree}}</el-descriptions-item>

		</el-descriptions>

	</div>
</template>
<script>
// 获取订单id
import { mapState } from "vuex";
// 引入生成二维码插件
import qrCode from "qrcode";
// 引入获取订单和支付的方法
import * as api from "@/api/transaction";
export default{
    data () {
        return {
            order_id:'', //订单号
            // 请求的订单详情
            orderDetail:{
                // 数据初始化
                orderDetail:[
                    {
                        productName:'',
                        description:'',
                        quantity:''
                    }
                ]
            },
            payUrlRes:{},  //请求获取的支付结果
            payUrl:''   //支付的地址
        }
    },
    meta: { 
        title:"zfy",
        name:"支付页"
    },
    computed: {
        
    },
    created () {
        let {order_id} = this.$route.query
        this.order_id=order_id
        // 如果用户刷新了当前的页面，本次交易取消，需要让用户重新提交交易
        if(!this.order_id){
            // 没有订单id，有可能用户刷新了页面
            // 提示本次交易取消,返回到预支付的页面
            this.$alert("本次交易取消，清重新提交","提示",{
                confirmButtonText:"确定",
                callback:(action) =>{
                    this.$router.push({path:"../../PreOrder"})
                }
            })
            return
        }

        // 1、根据订单id 请求订单详情
        // 2、根据订单id 获取微信支付地址，获取地址后，生成二维码

        // 并发请求
        Promise.all([api.getOrderDetail(this.order_id),api.pay(this.order_id)])
            .then(res =>{
                // console.log(res);
                this.orderDetail=res[0].data.data
                let paymentRes = res[1].data
                console.log(this.orderDetail);
                if(paymentRes.state){
                   let payUrl = paymentRes.code_url

                    //生成二维码
                    qrCode.toDataURL(payUrl,(err,img) =>{
                        // console.log(img);
                        this.payUrl = img
                    })
                }
                
            })

        // this.payUrlRes = payUrlRes
        // 获取支付的二维码地址

        // 调用生成二维码地址的方法
        // payUrlRes.code_url 就是微信支付返回的支付地址
        // 通过支付地址，生成二维码图片地址

        // 轮询，查询支付状态
        // 轮询的时候，一定要设置时间
        // 设置200ms
        this.queryPayStatusInterval = setInterval(() => {
            api.queryPayStatus(this.order_id)
            .then(res =>{
                if(res.data.state){
                    // 跳转到支付成功的页面
                    this.$router.push({path:"/payment/paysuccess"})
                }else{
                    // this.$router.push({path:'/vipmanager/charge'})
                }
            })
            
        }, 1000);
    },
    beforeDestroy(){
        // 组件即将销毁的时候
        // 清除定时器
        clearInterval(this.queryPayStatusInterval)
    }
    
}

</script>

<style lang="less" scoped>
.pay-container{
    line-height: 0;
}
.erwei{
    height: 160px;
}

</style>